<!--<template>-->
<!--  <div class="theme-page">-->
<!--    <nav-bar :activeComponent="activeComponent"></nav-bar>-->

<!--    &lt;!&ndash; 主题头部区域 &ndash;&gt;-->
<!--    <div class="theme-header" :style="{ backgroundImage: `url(${currentTheme.coverImage})` }">-->
<!--      <div class="theme-header-content">-->
<!--        <h1>{{ currentTheme.name }}</h1>-->
<!--        <p>{{ currentTheme.description }}</p>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 筛选区域 &ndash;&gt;-->
<!--    <div class="filter-container">-->
<!--      <div class="filter-row">-->
<!--        <span class="filter-label">按地区</span>-->
<!--        <div class="filter-options">-->
<!--          <div class="region-filter-container">-->
<!--            &lt;!&ndash; 热门地区选择 &ndash;&gt;-->
<!--            <el-radio-group v-model="filters.region" @change="applyFilters" class="hot-regions">-->
<!--              <el-radio-button label="全部">全部</el-radio-button>-->
<!--              <el-radio-button label="承德">承德</el-radio-button>-->
<!--              <el-radio-button label="秦皇岛">秦皇岛</el-radio-button>-->
<!--              <el-radio-button label="张家口">张家口</el-radio-button>-->
<!--              <el-radio-button label="石家庄">石家庄</el-radio-button>-->
<!--            </el-radio-group>-->

<!--            &lt;!&ndash; 级联选择器 &ndash;&gt;-->
<!--            <div class="cascader-container">-->
<!--              <el-cascader-->
<!--                  v-model="regionCascaderValue"-->
<!--                  :options="regionOptions"-->
<!--                  :props="cascaderProps"-->
<!--                  placeholder="选择更多地区"-->
<!--                  clearable-->
<!--                  @change="handleCascaderChange"-->
<!--              />-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="filter-row">-->
<!--        <span class="filter-label">按季节</span>-->
<!--        <div class="filter-options">-->
<!--          <el-radio-group v-model="filters.season" @change="applyFilters">-->
<!--            <el-radio-button label="全部">全部</el-radio-button>-->
<!--            <el-radio-button label="春季">春季</el-radio-button>-->
<!--            <el-radio-button label="夏季">夏季</el-radio-button>-->
<!--            <el-radio-button label="秋季">秋季</el-radio-button>-->
<!--            <el-radio-button label="冬季">冬季</el-radio-button>-->
<!--          </el-radio-group>-->
<!--        </div>-->
<!--      </div>-->

<!--      <div class="filter-row">-->
<!--        <span class="filter-label">按类型</span>-->
<!--        <div class="filter-options">-->
<!--          <el-checkbox-group v-model="filters.types" @change="applyFilters">-->
<!--            <el-checkbox label="景点">景点</el-checkbox>-->
<!--            <el-checkbox label="城市">城市</el-checkbox>-->
<!--            <el-checkbox label="美食">美食</el-checkbox>-->
<!--            <el-checkbox label="住宿">住宿</el-checkbox>-->
<!--            <el-checkbox label="活动">活动</el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 主要内容区域 &ndash;&gt;-->
<!--    <div class="theme-content">-->
<!--      &lt;!&ndash; 内容统计和排序 &ndash;&gt;-->
<!--      <div class="content-header">-->
<!--        <div class="content-stats">-->
<!--          <p>找到 <span>{{ filteredPlaces.length }}</span> 个与"{{ currentTheme.name }}"相关的目的地</p>-->
<!--        </div>-->
<!--        <div class="content-sort">-->
<!--          <el-dropdown @command="handleSort">-->
<!--            <span class="el-dropdown-link">-->
<!--              {{ sortOptions[currentSort] }}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--            </span>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item v-for="(option, key) in sortOptions" :key="key" :command="key">{{ option }}</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 内容瀑布流 &ndash;&gt;-->
<!--      <div v-if="loading" class="loading-container">-->
<!--        <el-skeleton :rows="5" animated />-->
<!--        <el-skeleton :rows="5" animated />-->
<!--      </div>-->

<!--      <div v-else-if="filteredPlaces.length === 0" class="empty-result">-->
<!--        <el-empty description="暂无符合条件的目的地" />-->
<!--      </div>-->

<!--      <div v-else class="places-grid">-->
<!--        <div v-for="place in filteredPlaces" :key="place.id" class="place-card" @click="viewPlaceDetail(place.id)">-->
<!--          <div class="place-image">-->
<!--            <img :src="place.image" :alt="place.name">-->
<!--            <div class="place-badges">-->
<!--              <span v-for="tag in place.tags" :key="tag" class="place-tag">{{ tag }}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="place-info">-->
<!--            <div class="place-name-row">-->
<!--              <h3>{{ place.name }}</h3>-->
<!--              <div class="place-rating">-->
<!--                <i class="fas fa-star"></i>-->
<!--                <span>{{ place.rating }}</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <p class="place-location"><i class="fas fa-map-marker-alt"></i> {{ place.city }}, {{ place.county }}</p>-->
<!--            <p class="place-description">{{ place.description }}</p>-->
<!--            <div class="place-footer">-->
<!--              <span class="place-season">推荐季节: {{ place.recommendedSeason }}</span>-->
<!--              <span class="place-views"><i class="fas fa-eye"></i> {{ place.views }}</span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 分页控制 &ndash;&gt;-->
<!--      <div class="pagination-container">-->
<!--        <el-pagination-->
<!--            background-->
<!--            layout="prev, pager, next"-->
<!--            :total="totalPlaces"-->
<!--            :page-size="pageSize"-->
<!--            :current-page="currentPage"-->
<!--            @current-change="handlePageChange"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 相关主题推荐 &ndash;&gt;-->
<!--    <div class="related-themes">-->
<!--      <h2>你可能还对这些主题感兴趣</h2>-->
<!--      <div class="related-themes-grid">-->
<!--        <div v-for="theme in relatedThemes" :key="theme.id" class="related-theme-card" @click="switchTheme(theme.id)">-->
<!--          <div class="related-theme-image">-->
<!--            <img :src="theme.image" :alt="theme.name">-->
<!--          </div>-->
<!--          <div class="related-theme-info">-->
<!--            <h3>{{ theme.name }}</h3>-->
<!--            <p>{{ theme.shortDescription }}</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { ref, reactive, computed, onMounted } from 'vue';-->
<!--import { ElMessage } from 'element-plus';-->
<!--import NavBar from "@/components/NavBar.vue";-->
<!--import router from "@/router";-->

<!--export default {-->
<!--  name: 'ThemePage',-->
<!--  components: { NavBar },-->
<!--  props: {-->
<!--    themeId: {-->
<!--      type: String,-->
<!--      required: true-->
<!--    }-->
<!--  },-->
<!--  setup(props) {-->
<!--    // 页面状态-->
<!--    const activeComponent = ref('destinations');-->
<!--    const loading = ref(true);-->
<!--    const currentPage = ref(1);-->
<!--    const pageSize = ref(12);-->
<!--    const totalPlaces = ref(0);-->

<!--    // 级联选择器值和配置-->
<!--    const regionCascaderValue = ref([]);-->
<!--    const cascaderProps = {-->
<!--      expandTrigger: 'hover',-->
<!--      checkStrictly: false,-->
<!--      emitPath: true-->
<!--    };-->

<!--    // 筛选条件-->
<!--    const filters = reactive({-->
<!--      region: '全部',-->
<!--      season: '全部',-->
<!--      types: []-->
<!--    });-->

<!--    // 排序选项-->
<!--    const sortOptions = {-->
<!--      popularity: '人气排序',-->
<!--      rating: '评分排序',-->
<!--      newest: '最新发布'-->
<!--    };-->
<!--    const currentSort = ref('popularity');-->

<!--    // 主题数据-->
<!--    const themes = ref([-->
<!--      {-->
<!--        id: 'cultural',-->
<!--        name: '人文古迹',-->
<!--        shortDescription: '探索中华五千年文化遗产',-->
<!--        description: '探索河北丰富的人文历史，感受千年古都的韵味与厚重。从古城堡到历史遗迹，领略历史的沉淀与文化的底蕴。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=人文古迹',-->
<!--        image: 'https://via.placeholder.com/400x300?text=人文古迹'-->
<!--      },-->
<!--      {-->
<!--        id: 'nature',-->
<!--        name: '山水田园',-->
<!--        shortDescription: '远离城市喧嚣，拥抱自然',-->
<!--        description: '在河北壮丽的山水间徜徉，探索清新自然的田园风光。青山绿水，溪流瀑布，尽享大自然的鬼斧神工与宁静祥和。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=山水田园',-->
<!--        image: 'https://via.placeholder.com/400x300?text=山水田园'-->
<!--      },-->
<!--      {-->
<!--        id: 'hiking',-->
<!--        name: '徒步探险',-->
<!--        shortDescription: '徒步穿越山川河谷，征服自然',-->
<!--        description: '踏上探险之旅，徒步穿越河北的崇山峻岭，感受征服挑战的成就感。无论是长城徒步还是深山探险，这里有最纯粹的户外体验。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=徒步探险',-->
<!--        image: 'https://via.placeholder.com/400x300?text=徒步探险'-->
<!--      },-->
<!--      {-->
<!--        id: 'beach',-->
<!--        name: '海岛沙滩',-->
<!--        shortDescription: '蔚蓝海水，细腻沙滩',-->
<!--        description: '在河北的黄金海岸线上，感受碧海蓝天的无限魅力。北戴河的细软沙滩，秦皇岛的宁静海湾，让你领略不一样的海滨风光。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=海岛沙滩',-->
<!--        image: 'https://via.placeholder.com/400x300?text=海岛沙滩'-->
<!--      },-->
<!--      {-->
<!--        id: 'food',-->
<!--        name: '美食之旅',-->
<!--        shortDescription: '品尝各地美食，舌尖上的旅行',-->
<!--        description: '探索河北地道美食，从传统小吃到地方特色菜肴，让味蕾享受一场盛宴。品尝正宗的保定驴肉火烧，承德宫廷菜，唐山大麻花等特色美食。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=美食之旅',-->
<!--        image: 'https://via.placeholder.com/400x300?text=美食之旅'-->
<!--      },-->
<!--      {-->
<!--        id: 'photography',-->
<!--        name: '摄影胜地',-->
<!--        shortDescription: '捕捉最美瞬间，记录旅途中的感动',-->
<!--        description: '河北的绝美风光为摄影爱好者提供了无限创作素材。从壮丽的长城到金黄的油菜花田，每一个角落都是摄影的绝佳取景地。',-->
<!--        coverImage: 'https://via.placeholder.com/1920x600?text=摄影胜地',-->
<!--        image: 'https://via.placeholder.com/400x300?text=摄影胜地'-->
<!--      }-->
<!--    ]);-->

<!--    // 当前主题-->
<!--    const currentTheme = computed(() => {-->
<!--      return themes.value.find(theme => theme.id === props.themeId) || themes.value[0];-->
<!--    });-->

<!--    // 相关主题-->
<!--    const relatedThemes = computed(() => {-->
<!--      return themes.value.filter(theme => theme.id !== currentTheme.value.id).slice(0, 3);-->
<!--    });-->

<!--    // 区域数据-->
<!--    const regionOptions = [-->
<!--      {-->
<!--        value: '石家庄',-->
<!--        label: '石家庄',-->
<!--        children: [-->
<!--          {-->
<!--            value: '市区',-->
<!--            label: '市区',-->
<!--            children: [-->
<!--              { value: '长安区', label: '长安区' },-->
<!--              { value: '桥西区', label: '桥西区' },-->
<!--              { value: '新华区', label: '新华区' }-->
<!--            ]-->
<!--          },-->
<!--          {-->
<!--            value: '名胜景区',-->
<!--            label: '名胜景区',-->
<!--            children: [-->
<!--              { value: '正定古城', label: '正定古城' },-->
<!--              { value: '西柏坡', label: '西柏坡' }-->
<!--            ]-->
<!--          }-->
<!--        ]-->
<!--      },-->
<!--      {-->
<!--        value: '承德',-->
<!--        label: '承德',-->
<!--        children: [-->
<!--          {-->
<!--            value: '市区',-->
<!--            label: '市区',-->
<!--            children: [-->
<!--              { value: '双桥区', label: '双桥区' },-->
<!--              { value: '双滦区', label: '双滦区' }-->
<!--            ]-->
<!--          },-->
<!--          {-->
<!--            value: '名胜景区',-->
<!--            label: '名胜景区',-->
<!--            children: [-->
<!--              { value: '避暑山庄', label: '避暑山庄' },-->
<!--              { value: '外八庙', label: '外八庙' },-->
<!--              { value: '金山岭长城', label: '金山岭长城' }-->
<!--            ]-->
<!--          }-->
<!--        ]-->
<!--      },-->
<!--      {-->
<!--        value: '秦皇岛',-->
<!--        label: '秦皇岛',-->
<!--        children: [-->
<!--          {-->
<!--            value: '市区',-->
<!--            label: '市区',-->
<!--            children: [-->
<!--              { value: '海港区', label: '海港区' },-->
<!--              { value: '北戴河区', label: '北戴河区' },-->
<!--              { value: '山海关区', label: '山海关区' }-->
<!--            ]-->
<!--          },-->
<!--          {-->
<!--            value: '名胜景区',-->
<!--            label: '名胜景区',-->
<!--            children: [-->
<!--              { value: '北戴河海滨', label: '北戴河海滨' },-->
<!--              { value: '山海关', label: '山海关' },-->
<!--              { value: '黄金海岸', label: '黄金海岸' }-->
<!--            ]-->
<!--          }-->
<!--        ]-->
<!--      },-->
<!--      {-->
<!--        value: '张家口',-->
<!--        label: '张家口',-->
<!--        children: [-->
<!--          {-->
<!--            value: '市区',-->
<!--            label: '市区',-->
<!--            children: [-->
<!--              { value: '桥东区', label: '桥东区' },-->
<!--              { value: '桥西区', label: '桥西区' }-->
<!--            ]-->
<!--          },-->
<!--          {-->
<!--            value: '名胜景区',-->
<!--            label: '名胜景区',-->
<!--            children: [-->
<!--              { value: '崇礼滑雪场', label: '崇礼滑雪场' },-->
<!--              { value: '万龙滑雪场', label: '万龙滑雪场' },-->
<!--              { value: '草原天路', label: '草原天路' }-->
<!--            ]-->
<!--          }-->
<!--        ]-->
<!--      }-->
<!--    ];-->

<!--    // 模拟地点数据-->
<!--    const places = ref([]);-->

<!--    // 过滤后的地点-->
<!--    const filteredPlaces = computed(() => {-->
<!--      let result = places.value;-->

<!--      // 应用筛选条件-->
<!--      if (filters.region !== '全部') {-->
<!--        result = result.filter(place =>-->
<!--            place.city.includes(filters.region) ||-->
<!--            place.county.includes(filters.region)-->
<!--        );-->
<!--      }-->

<!--      if (filters.season !== '全部') {-->
<!--        result = result.filter(place =>-->
<!--            place.recommendedSeason.includes(filters.season)-->
<!--        );-->
<!--      }-->

<!--      if (filters.types.length > 0) {-->
<!--        result = result.filter(place =>-->
<!--            filters.types.some(type => place.type === type)-->
<!--        );-->
<!--      }-->

<!--      // 应用排序-->
<!--      switch (currentSort.value) {-->
<!--        case 'popularity':-->
<!--          result = [...result].sort((a, b) => b.views - a.views);-->
<!--          break;-->
<!--        case 'rating':-->
<!--          result = [...result].sort((a, b) => b.rating - a.rating);-->
<!--          break;-->
<!--        case 'newest':-->
<!--          result = [...result].sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));-->
<!--          break;-->
<!--      }-->

<!--      // 计算总数并返回当前页的数据-->
<!--      // eslint-disable-next-line vue/no-side-effects-in-computed-properties-->
<!--      totalPlaces.value = result.length;-->
<!--      const start = (currentPage.value - 1) * pageSize.value;-->
<!--      const end = start + pageSize.value;-->
<!--      return result.slice(start, end);-->
<!--    });-->

<!--    // 生成模拟地点数据-->
<!--    const generatePlacesData = () => {-->
<!--      const types = ['景点', '城市', '美食', '住宿', '活动'];-->
<!--      const cities = ['石家庄', '承德', '秦皇岛', '张家口', '唐山', '保定'];-->
<!--      const counties = {-->
<!--        '石家庄': ['长安区', '桥西区', '正定县', '藁城区'],-->
<!--        '承德': ['双桥区', '双滦区', '避暑山庄', '丰宁坝上'],-->
<!--        '秦皇岛': ['海港区', '北戴河区', '山海关区', '昌黎县'],-->
<!--        '张家口': ['桥东区', '桥西区', '崇礼区', '宣化区'],-->
<!--        '唐山': ['路南区', '路北区', '遵化市', '迁安市'],-->
<!--        '保定': ['莲池区', '竞秀区', '涿州市', '易县']-->
<!--      };-->
<!--      const seasons = ['春季', '夏季', '秋季', '冬季'];-->
<!--      const themeTagsMap = {-->
<!--        'cultural': ['古迹', '文化', '历史', '遗址', '寺庙', '古城'],-->
<!--        'nature': ['自然', '风景', '山水', '田园', '湖泊', '森林'],-->
<!--        'hiking': ['徒步', '探险', '登山', '户外', '野营', '穿越'],-->
<!--        'beach': ['海滩', '海岸', '沙滩', '海湾', '海景', '度假'],-->
<!--        'food': ['美食', '小吃', '餐厅', '特产', '夜市', '传统菜'],-->
<!--        'photography': ['摄影', '日出', '日落', '风光', '人像', '花海']-->
<!--      };-->

<!--      const themeDescriptions = {-->
<!--        'cultural': [-->
<!--          '这里有着悠久的历史文化，古建筑保存完好，是了解河北历史的重要窗口。',-->
<!--          '作为重要的历史遗址，这里的每一砖一瓦都诉说着厚重的历史故事。',-->
<!--          '这座古迹展现了中国传统建筑的精髓，是文化爱好者不容错过的地方。'-->
<!--        ],-->
<!--        'nature': [-->
<!--          '远离城市喧嚣，这里的自然风光秀丽，是放松身心的绝佳去处。',-->
<!--          '四季风景各异，春有花海，夏有绿树，秋有红叶，冬有银装。',-->
<!--          '山水相依，风光旖旎，是摄影和徒步的天堂。'-->
<!--        ],-->
<!--        'hiking': [-->
<!--          '这条徒步路线难度适中，沿途风景优美，适合户外爱好者探索。',-->
<!--          '崎岖的山路，壮观的风景，是挑战自我的绝佳选择。',-->
<!--          '穿越原始森林，溪流，草甸，体验大自然的鬼斧神工。'-->
<!--        ],-->
<!--        'beach': [-->
<!--          '细软的沙滩，清澈的海水，是夏季度假的理想选择。',-->
<!--          '这片海岸线风光独特，既可以欣赏日出日落，又能享受海滨浴场的乐趣。',-->
<!--          '远离喧嚣的海湾，宁静而美丽，是放松身心的绝佳去处。'-->
<!--        ],-->
<!--        'food': [-->
<!--          '这里的特色美食汇集了河北的传统风味，让人回味无穷。',-->
<!--          '地道的河北菜肴，新鲜的食材，是品尝当地美食的最佳选择。',-->
<!--          '这家老字号店铺传承数代，保留了最正宗的传统做法和口味。'-->
<!--        ],-->
<!--        'photography': [-->
<!--          '这里的光影变化丰富，无论是日出还是日落，都能捕捉到绝美的瞬间。',-->
<!--          '四季景色各异，每个季节都有独特的拍摄主题和视角。',-->
<!--          '山水相映，是摄影师们最爱的外景地之一。'-->
<!--        ]-->
<!--      };-->

<!--      // 生成50个模拟地点-->
<!--      const mockPlaces = [];-->
<!--      for (let i = 0; i < 50; i++) {-->
<!--        const city = cities[Math.floor(Math.random() * cities.length)];-->
<!--        const county = counties[city][Math.floor(Math.random() * counties[city].length)];-->
<!--        const type = types[Math.floor(Math.random() * types.length)];-->
<!--        const season = seasons[Math.floor(Math.random() * seasons.length)];-->
<!--        const seasonText = Math.random() > 0.5 ? season : `${season}、${seasons[(seasons.indexOf(season) + 1) % 4]}`;-->
<!--        const rating = (Math.random() * 2 + 3).toFixed(1);-->
<!--        const views = Math.floor(Math.random() * 10000) + 1000;-->

<!--        // 获取与当前主题相关的标签-->
<!--        const themeId = props.themeId || 'cultural';-->
<!--        const themeTags = themeTagsMap[themeId] || themeTagsMap['cultural'];-->

<!--        // 随机选择2-3个标签-->
<!--        const tags = [];-->
<!--        const tagCount = Math.floor(Math.random() * 2) + 2;-->
<!--        for (let j = 0; j < tagCount; j++) {-->
<!--          const tag = themeTags[Math.floor(Math.random() * themeTags.length)];-->
<!--          if (!tags.includes(tag)) {-->
<!--            tags.push(tag);-->
<!--          }-->
<!--        }-->

<!--        // 获取与主题相关的描述-->
<!--        const descriptions = themeDescriptions[themeId] || themeDescriptions['cultural'];-->
<!--        const description = descriptions[Math.floor(Math.random() * descriptions.length)];-->

<!--        mockPlaces.push({-->
<!--          id: 1000 + i,-->
<!--          name: `${county}${tags[0]}${type === '景点' ? '景区' : type === '城市' ? '城' : type === '美食' ? '美食街' : type === '住宿' ? '度假村' : '体验区'}`,-->
<!--          city: city,-->
<!--          county: county,-->
<!--          type: type,-->
<!--          image: `https://via.placeholder.com/600x400?text=${county}`,-->
<!--          description: description,-->
<!--          tags: tags,-->
<!--          recommendedSeason: seasonText,-->
<!--          rating: rating,-->
<!--          views: views,-->
<!--          publishDate: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)-->
<!--        });-->
<!--      }-->

<!--      places.value = mockPlaces;-->
<!--    };-->

<!--    // 应用筛选条件-->
<!--    const applyFilters = () => {-->
<!--      currentPage.value = 1;-->
<!--      // filteredPlaces计算属性会自动更新-->
<!--    };-->

<!--    // 处理热门地区选择-->
<!--    const handleHotRegionChange = (value) => {-->
<!--      regionCascaderValue.value = [];-->
<!--      filters.region = value;-->
<!--      applyFilters();-->
<!--    };-->

<!--    // 处理级联选择器选择-->
<!--    const handleCascaderChange = (value) => {-->
<!--      if (!value || value.length === 0) {-->
<!--        return;-->
<!--      }-->

<!--      filters.region = value[value.length - 1];-->
<!--      applyFilters();-->
<!--    };-->

<!--    // 处理排序-->
<!--    const handleSort = (command) => {-->
<!--      currentSort.value = command;-->
<!--      // filteredPlaces计算属性会自动更新-->
<!--    };-->

<!--    // 处理页码变化-->
<!--    const handlePageChange = (page) => {-->
<!--      currentPage.value = page;-->
<!--      // filteredPlaces计算属性会自动更新-->
<!--      window.scrollTo({-->
<!--        top: document.querySelector('.theme-content').offsetTop - 20,-->
<!--        behavior: 'smooth'-->
<!--      });-->
<!--    };-->

<!--    // 查看地点详情-->
<!--    const viewPlaceDetail = (id) => {-->
<!--      ElMessage.success(`查看地点详情，ID: ${id}`);-->
<!--      // 这里应该跳转到地点详情页面-->
<!--      // router.push(`/place/${id}`);-->
<!--    };-->

<!--    // 切换主题-->
<!--    const switchTheme = (themeId) => {-->
<!--      ElMessage.success(`切换到主题: ${themeId}`);-->
<!--      // 这里应该跳转到指定主题的页面-->
<!--      // router.push(`/theme/${themeId}`);-->
<!--    };-->

<!--    onMounted(() => {-->
<!--      // 模拟加载数据-->
<!--      loading.value = true;-->
<!--      setTimeout(() => {-->
<!--        generatePlacesData();-->
<!--        loading.value = false;-->
<!--      }, 800);-->
<!--    });-->

<!--    return {-->
<!--      activeComponent,-->
<!--      currentTheme,-->
<!--      relatedThemes,-->
<!--      loading,-->
<!--      filters,-->
<!--      currentPage,-->
<!--      pageSize,-->
<!--      totalPlaces,-->
<!--      sortOptions,-->
<!--      currentSort,-->
<!--      regionOptions,-->
<!--      cascaderProps,-->
<!--      regionCascaderValue,-->
<!--      filteredPlaces,-->
<!--      handleHotRegionChange,-->
<!--      handleCascaderChange,-->
<!--      applyFilters,-->
<!--      handleSort,-->
<!--      handlePageChange,-->
<!--      viewPlaceDetail,-->
<!--      switchTheme-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');-->
<!--@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');-->

<!--.theme-page {-->
<!--  font-family: 'Noto Sans SC', sans-serif;-->
<!--  background-color: #f9f9f9;-->
<!--  color: #333;-->
<!--}-->

<!--/* 主题头部区域 */-->
<!--.theme-header {-->
<!--  height: 50vh;-->
<!--  background-size: cover;-->
<!--  background-position: center;-->
<!--  position: relative;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: center;-->
<!--  text-align: center;-->
<!--  color: white;-->
<!--}-->

<!--.theme-header::before {-->
<!--  content: '';-->
<!--  position: absolute;-->
<!--  top: 0;-->
<!--  left: 0;-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);-->
<!--}-->

<!--.theme-header-content {-->
<!--  position: relative;-->
<!--  z-index: 1;-->
<!--  max-width: 800px;-->
<!--  padding: 0 20px;-->
<!--}-->

<!--.theme-header h1 {-->
<!--  font-size: 3rem;-->
<!--  margin-bottom: 20px;-->
<!--  text-shadow: 0 2px 10px rgba(0,0,0,0.5);-->
<!--}-->

<!--.theme-header p {-->
<!--  font-size: 1.2rem;-->
<!--  line-height: 1.6;-->
<!--  text-shadow: 0 1px 5px rgba(0,0,0,0.5);-->
<!--}-->

<!--/* 筛选区域 */-->
<!--.filter-container {-->
<!--  max-width: 1200px;-->
<!--  margin: -30px auto 20px;-->
<!--  background-color: white;-->
<!--  border-radius: 10px;-->
<!--  box-shadow: 0 5px 15px rgba(0,0,0,0.08);-->
<!--  padding: 20px;-->
<!--  position: relative;-->
<!--  z-index: 2;-->
<!--}-->

<!--.filter-row {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 15px;-->
<!--  justify-content: flex-start;-->
<!--}-->

<!--.filter-row:last-child {-->
<!--  margin-bottom: 0;-->
<!--}-->

<!--.filter-label {-->
<!--  width: 80px;-->
<!--  font-weight: 500;-->
<!--  color: #333;-->
<!--  text-align: left;-->
<!--}-->

<!--.filter-options {-->
<!--  flex: 1;-->
<!--  text-align: left;-->
<!--}-->

<!--.region-filter-container {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 15px;-->
<!--}-->

<!--.hot-regions {-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.cascader-container {-->
<!--  width: 220px;-->
<!--}-->

<!--/* 级联选择器样式覆盖 */-->
<!--:deep(.el-cascader) {-->
<!--  width: 100%;-->
<!--}-->

<!--/* 主要内容区域 */-->
<!--.theme-content {-->
<!--  max-width: 1200px;-->
<!--  margin: 30px auto;-->
<!--  padding: 0 20px;-->
<!--}-->

<!--/* 内容头部 */-->
<!--.content-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.content-stats {-->
<!--  font-size: 16px;-->
<!--  color: #666;-->
<!--}-->

<!--.content-stats span {-->
<!--  font-weight: 600;-->
<!--  color: #17a2b8;-->
<!--}-->

<!--.content-sort {-->
<!--  cursor: pointer;-->
<!--}-->

<!--.el-dropdown-link {-->
<!--  color: #409EFF;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 5px;-->
<!--}-->

<!--/* 地点卡片网格 */-->
<!--.places-grid {-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));-->
<!--  gap: 25px;-->
<!--}-->

<!--.place-card {-->
<!--  background-color: white;-->
<!--  border-radius: 10px;-->
<!--  overflow: hidden;-->
<!--  box-shadow: 0 5px 15px rgba(0,0,0,0.05);-->
<!--  transition: all 0.3s ease;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.place-card:hover {-->
<!--  transform: translateY(-8px);-->
<!--  box-shadow: 0 15px 30px rgba(0,0,0,0.1);-->
<!--}-->

<!--.place-image {-->
<!--  height: 200px;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.place-image img {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--  transition: transform 0.5s ease;-->
<!--}-->

<!--.place-card:hover .place-image img {-->
<!--  transform: scale(1.05);-->
<!--}-->

<!--.place-badges {-->
<!--  position: absolute;-->
<!--  bottom: 10px;-->
<!--  left: 10px;-->
<!--  display: flex;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 5px;-->
<!--}-->

<!--.place-tag {-->
<!--  background-color: rgba(23, 162, 184, 0.8);-->
<!--  color: white;-->
<!--  font-size: 12px;-->
<!--  padding: 3px 10px;-->
<!--  border-radius: 15px;-->
<!--}-->

<!--.place-info {-->
<!--  padding: 15px;-->
<!--}-->

<!--.place-name-row {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: flex-start;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.place-name-row h3 {-->
<!--  margin: 0;-->
<!--  font-size: 18px;-->
<!--  color: #333;-->
<!--  flex: 1;-->
<!--}-->

<!--.place-rating {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 5px;-->
<!--  color: #ff9800;-->
<!--  font-weight: 600;-->
<!--}-->

<!--.place-location {-->
<!--  font-size: 14px;-->
<!--  color: #666;-->
<!--  margin-bottom: 10px;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 5px;-->
<!--}-->

<!--.place-location i {-->
<!--  color: #ff6b6b;-->
<!--}-->

<!--.place-description {-->
<!--  font-size: 14px;-->
<!--  color: #555;-->
<!--  margin-bottom: 15px;-->
<!--  line-height: 1.5;-->
<!--  display: -webkit-box;-->
<!--  -webkit-line-clamp: 2;-->
<!--  -webkit-box-orient: vertical;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.place-footer {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  font-size: 13px;-->
<!--  color: #777;-->
<!--}-->

<!--.place-season {-->
<!--  color: #17a2b8;-->
<!--}-->

<!--.place-views {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 5px;-->
<!--}-->

<!--/* 加载状态和空结果 */-->
<!--.loading-container, .empty-result {-->
<!--  padding: 40px 20px;-->
<!--  text-align: center;-->
<!--}-->

<!--/* 分页控制 */-->
<!--.pagination-container {-->
<!--  margin-top: 40px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--}-->

<!--/* 相关主题区域 */-->
<!--.related-themes {-->
<!--  background-color: #f0f8ff;-->
<!--  padding: 50px 20px;-->
<!--}-->

<!--.related-themes h2 {-->
<!--  text-align: center;-->
<!--  margin-bottom: 30px;-->
<!--  font-size: 24px;-->
<!--  color: #333;-->
<!--}-->

<!--.related-themes-grid {-->
<!--  max-width: 1200px;-->
<!--  margin: 0 auto;-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));-->
<!--  gap: 25px;-->
<!--}-->

<!--.related-theme-card {-->
<!--  background-color: white;-->
<!--  border-radius: 10px;-->
<!--  overflow: hidden;-->
<!--  box-shadow: 0 5px 15px rgba(0,0,0,0.05);-->
<!--  transition: all 0.3s ease;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.related-theme-card:hover {-->
<!--  transform: translateY(-8px);-->
<!--  box-shadow: 0 15px 30px rgba(0,0,0,0.1);-->
<!--}-->

<!--.related-theme-image {-->
<!--  height: 160px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.related-theme-image img {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--  transition: transform 0.5s ease;-->
<!--}-->

<!--.related-theme-card:hover .related-theme-image img {-->
<!--  transform: scale(1.05);-->
<!--}-->

<!--.related-theme-info {-->
<!--  padding: 15px;-->
<!--}-->

<!--.related-theme-info h3 {-->
<!--  margin: 0 0 8px 0;-->
<!--  font-size: 18px;-->
<!--  color: #333;-->
<!--}-->

<!--.related-theme-info p {-->
<!--  margin: 0;-->
<!--  font-size: 14px;-->
<!--  color: #666;-->
<!--  line-height: 1.5;-->
<!--}-->

<!--/* 响应式设计 */-->
<!--@media (max-width: 1024px) {-->
<!--  .theme-header h1 {-->
<!--    font-size: 2.5rem;-->
<!--  }-->

<!--  .places-grid {-->
<!--    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));-->
<!--  }-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .theme-header {-->
<!--    height: 40vh;-->
<!--  }-->

<!--  .theme-header h1 {-->
<!--    font-size: 2rem;-->
<!--  }-->

<!--  .theme-header p {-->
<!--    font-size: 1rem;-->
<!--  }-->

<!--  .filter-row {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--  }-->

<!--  .filter-label {-->
<!--    margin-bottom: 10px;-->
<!--  }-->

<!--  .region-filter-container {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--  }-->

<!--  .hot-regions {-->
<!--    margin-bottom: 10px;-->
<!--    margin-right: 0;-->
<!--  }-->

<!--  .cascader-container {-->
<!--    width: 100%;-->
<!--  }-->

<!--  .places-grid {-->
<!--    grid-template-columns: 1fr;-->
<!--  }-->

<!--  .content-header {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--    gap: 10px;-->
<!--  }-->

<!--  .related-themes-grid {-->
<!--    grid-template-columns: 1fr;-->
<!--  }-->
<!--}-->

<!--@media (max-width: 480px) {-->
<!--  .theme-header {-->
<!--    height: 35vh;-->
<!--  }-->

<!--  .theme-header h1 {-->
<!--    font-size: 1.8rem;-->
<!--  }-->
<!--}-->
<!--</style>-->

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.theme-page {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* 主题头部区域 */
.theme-header {
  height: 50vh;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.theme-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
}

.theme-header-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

.theme-header h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.theme-header p {
  font-size: 1.2rem;
  line-height: 1.6;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

/* 筛选区域 */
.filter-container {
  max-width: 1200px;
  margin: -30px auto 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  padding: 20px;
  position: relative;
  z-index: 2;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: flex-start;
}

.filter-row:last-child {
  margin-bottom: 0;
}

.filter-label {
  width: 80px;
  font-weight: 500;
  color: #333;
  text-align: left;
}

.filter-options {
  flex: 1;
  text-align: left;
}

.region-filter-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.hot-regions {
  margin-right: 10px;
}

.cascader-container {
  width: 220px;
}

/* 级联选择器样式覆盖 */
:deep(.el-cascader) {
  width: 100%;
}

/* 主要内容区域 */
.theme-content {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

/* 内容头部 */
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content-stats {
  font-size: 16px;
  color: #666;
}

.content-stats span {
  font-weight: 600;
  color: #17a2b8;
}

.content-sort {
  cursor: pointer;
}

.el-dropdown-link {
  color: #409EFF;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 分类标题 */
.section-title {
  font-size: 1.5rem;
  color: #333;
  margin: 30px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

/* 地点卡片网格 */
.places-section {
  margin-bottom: 40px;
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
}

.place-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.place-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* 城市卡片特殊样式 */
.city-card {
  border-left: 4px solid #17a2b8;
}

.city-tag {
  background-color: rgba(255, 107, 107, 0.8);
}

.place-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.place-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.place-card:hover .place-image img {
  transform: scale(1.05);
}

.place-badges {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.place-tag {
  background-color: rgba(23, 162, 184, 0.8);
  color: white;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 15px;
}

.place-info {
  padding: 15px;
}

.place-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.place-name-row h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  flex: 1;
}

.place-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ff9800;
  font-weight: 600;
}

.place-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.place-location i {
  color: #ff6b6b;
}

.place-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.place-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #777;
}

.place-season, .place-feature {
  color: #17a2b8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.place-views {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 加载状态和空结果 */
.loading-container, .empty-result {
  padding: 40px 20px;
  text-align: center;
}

/* 分页控制 */
.pagination-container {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* 相关主题区域 */
.related-themes {
  background-color: #f0f8ff;
  padding: 50px 20px;
}

.related-themes h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  color: #333;
}

.related-themes-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.related-theme-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.related-theme-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.related-theme-image {
  height: 160px;
  overflow: hidden;
}

.related-theme-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-theme-card:hover .related-theme-image img {
  transform: scale(1.05);
}

.related-theme-info {
  padding: 15px;
}

.related-theme-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #333;
}

.related-theme-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .theme-header h1 {
    font-size: 2.5rem;
  }

  .places-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .theme-header {
    height: 40vh;
  }

  .theme-header h1 {
    font-size: 2rem;
  }

  .theme-header p {
    font-size: 1rem;
  }

  .filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-label {
    margin-bottom: 10px;
  }

  .region-filter-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .hot-regions {
    margin-bottom: 10px;
    margin-right: 0;
  }

  .cascader-container {
    width: 100%;
  }

  .places-grid {
    grid-template-columns: 1fr;
  }

  .content-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .related-themes-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .theme-header {
    height: 35vh;
  }

  .theme-header h1 {
    font-size: 1.8rem;
  }
}
</style><template>
  <div class="theme-page">
    <nav-bar :activeComponent="activeComponent"></nav-bar>

    <!-- 主题头部区域 -->
    <div class="theme-header" :style="{ backgroundImage: `url(${currentTheme.image})` }">
      <div class="theme-header-content">
        <h1>{{ currentTheme.clazzName }}</h1>
        <p>{{ currentTheme.description }}</p>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <div class="filter-row">
        <span class="filter-label">按地区</span>
        <div class="filter-options">
          <div class="region-filter-container">
            <!-- 热门地区选择 -->
            <el-radio-group v-model="filters.region" @change="applyFilters" class="hot-regions">
              <el-radio-button label="全部">全部</el-radio-button>
      <el-radio-button label="石家庄">石家庄</el-radio-button>
      <el-radio-button label="唐山">唐山</el-radio-button>
      <el-radio-button label="秦皇岛">秦皇岛</el-radio-button>
      <el-radio-button label="邯郸">邯郸</el-radio-button>
      <el-radio-button label="邢台">邢台</el-radio-button>
      <el-radio-button label="保定">保定</el-radio-button>
      <el-radio-button label="张家口">张家口</el-radio-button>
      <el-radio-button label="承德">承德</el-radio-button>
      <el-radio-button label="沧州">沧州</el-radio-button>
      <el-radio-button label="廊坊">廊坊</el-radio-button>
      <el-radio-button label="衡水">衡水</el-radio-button>
            </el-radio-group>

            <!-- 级联选择器 -->
            <!-- <div class="cascader-container">
              <el-cascader
                  v-model="regionCascaderValue"
                  :options="regionOptions"
                  :props="cascaderProps"
                  placeholder="选择更多地区"
                  clearable
                  @change="handleCascaderChange"
              />
            </div> -->
          </div>
        </div>
      </div>

      <div class="filter-row">
        <span class="filter-label">按季节</span>
        <div class="filter-options">
          <el-radio-group v-model="filters.season" @change="applyFilters">
            <el-radio-button label="全部">全部</el-radio-button>
            <el-radio-group v-model="filters.season">
              <el-radio-button :label="'春'">春季</el-radio-button>
              <el-radio-button :label="'夏'">夏季</el-radio-button>
              <el-radio-button :label="'秋'">秋季</el-radio-button>
              <el-radio-button :label="'冬'">冬季</el-radio-button>
            </el-radio-group>
            
          </el-radio-group>
        </div>
      </div>

      <div class="filter-row">
        <span class="filter-label">按类别</span>
        <div class="filter-options">
          <el-radio-group v-model="filters.category" @change="applyFilters">
            <el-radio-button label="景点">景点</el-radio-button>
            <el-radio-button label="城市">城市</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="theme-content">
      <!-- 内容统计和排序 -->
      <div class="content-header">
        <div class="content-stats">
          <p>找到 <span>{{ filteredPlaces.length }}</span> 个与"{{ currentTheme.clazzName }}"相关的{{ filters.category === '全部' ? '目的地' : filters.category }}</p>
        </div>
        <div class="content-sort">
          <el-dropdown @command="handleSort">
            <span class="el-dropdown-link">
              {{ sortOptions[currentSort] }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(option, key) in sortOptions" :key="key" :command="key">{{ option }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容瀑布流 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
        <el-skeleton :rows="5" animated />
      </div>

      <div v-else-if="filteredPlaces.length === 0" class="empty-result">
        <el-empty description="暂无符合条件的内容" />
      </div>

      <!-- 景点展示 -->
      <div v-else-if="filters.category === '景点' || filters.category === '全部'" class="places-section">
        <h3 v-if="filters.category === '全部'" class="section-title">景点</h3>
        <div  class="places-grid">
          <div
              v-for="place in filteredPlaces"
              :key="place.spotId"
              class="place-card"
              @click="viewSceneryDetail(place.spotId)"
          >
            <div class="place-image">
              <img :src="place.coverImage" :alt="place.spotName">
              <div class="place-badges">
                <span v-for="tag in place.tags" :key="tag" class="place-tag">{{ tag.tagName }}</span>
              </div>
            </div>
        
            <div class="place-info">
              <div class="place-name-row">
                <h3>{{ place.spotName }}</h3>
                <div class="place-rating">
                  <i class="fas fa-star"></i>
                  <span>{{ place.score }}</span>
                </div>
              </div>
              <p class="place-location"><i class="fas fa-map-marker-alt"></i> {{ place.city.province.provinceName }}, {{ place.city.cityName}}</p>
              <p class="place-description">{{ place.description }}</p>
              <div class="place-footer">
                <span class="place-season">旺季: {{ place.seasons.旺季 }}</span>
                <span class="place-season">推荐季节: {{ place.seasons.最佳季节 }}</span>
                <span class="place-views"><i class="fas fa-eye"></i> {{ place.hotness }}</span>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- 城市展示 -->
      <div v-else-if="filters.category === '城市' || filters.category === '全部'" class="places-section">
        <h3 v-if="filters.category === '全部'" class="section-title">城市</h3>
        <div class="places-grid">
          <div
              v-for="place in filteredPlaces"
              :key="place.id"
              class="place-card city-card"
              @click="viewCityDetail(place.id)"
          >
            <div class="place-image">
              <img :src="place.imagePath[0]" :alt="place.id">
            
            </div>
            <div class="place-info">
              <div class="place-name-row">
                <h3>{{ place.cityName }}</h3>
                <div class="place-rating">
                  <i class="fas fa-heart" style="color: red;"></i>
                  <span>{{ place.likes}}</span>
                </div>
              </div>
              <p class="place-location"><i class="fas fa-map-marker-alt"></i> {{ place.province.provinceName }} {{ place.cityName }}</p>
              <p class="place-description">{{ place.description }}</p>
              <div class="place-footer">
                <span class="place-views"><i class="fas fa-eye"></i> {{ place.hotness }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页控制 -->
      <div class="pagination-container">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="totalPlaces"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 相关主题推荐 -->
    <div class="related-themes">
      <h2>你可能还对这些主题感兴趣</h2>
      <div class="related-themes-grid">
        <div v-for="theme in relatedThemes" :key="theme.clazzId" class="related-theme-card" @click="switchTheme(theme.clazzId)">
          <div class="related-theme-image">
            <img :src="theme.image" :alt="theme.clazzName">
          </div>
          <div class="related-theme-info">
            <h3>{{ theme.clazzName }}</h3>
            <p>{{ theme.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted,watch } from 'vue';
import { ElMessage } from 'element-plus';
import NavBar from "@/components/NavBar.vue";
import router from "@/router";
import { useRoute } from 'vue-router';
import {getSpotClass,findThemeCity} from "@/api/destinations.js";
export default {
  name: 'ThemePage',
  components: { NavBar },
  props: {
    themeId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 页面状态
const route = useRoute();
const themeId = ref(route.query.id);

    const activeComponent = ref('destinations');
    const loading = ref(true);
    const currentPage = ref(1);
    const pageSize = ref(12);
    const totalPlaces = ref(0);
    watch(() => route.query.id, async (newId) => {
  themeId.value = newId;
  loading.value = true;
  await updateThemeCity();
  await updateTheme();
  loading.value = false;
});
    // 级联选择器值和配置
    const regionCascaderValue = ref([]);
    const cascaderProps = {
      expandTrigger: 'hover',
      checkStrictly: false,
      emitPath: true
    };

    // 筛选条件
    const filters = reactive({
      region: '全部',
      season: '全部',
      category: '景点'
    });

    // 排序选项
    const sortOptions = {
      popularity: '人气排序',
      rating: '评分排序'
  
    };
    const currentSort = ref('popularity');

    // 主题数据
    const themes = ref([
      {
        id: 'cultural',
        name: '人文古迹',
        shortDescription: '探索中华五千年文化遗产',
        description: '探索河北丰富的人文历史，感受千年古都的韵味与厚重。从古城堡到历史遗迹，领略历史的沉淀与文化的底蕴。',
        coverImage: 'https://via.placeholder.com/1920x600?text=人文古迹',
        image: 'https://via.placeholder.com/400x300?text=人文古迹'
      },
      {
        id: 'nature',
        name: '山水田园',
        shortDescription: '远离城市喧嚣，拥抱自然',
        description: '在河北壮丽的山水间徜徉，探索清新自然的田园风光。青山绿水，溪流瀑布，尽享大自然的鬼斧神工与宁静祥和。',
        coverImage: 'https://via.placeholder.com/1920x600?text=山水田园',
        image: 'https://via.placeholder.com/400x300?text=山水田园'
      },
      {
        id: 'hiking',
        name: '徒步探险',
        shortDescription: '徒步穿越山川河谷，征服自然',
        description: '踏上探险之旅，徒步穿越河北的崇山峻岭，感受征服挑战的成就感。无论是长城徒步还是深山探险，这里有最纯粹的户外体验。',
        coverImage: 'https://via.placeholder.com/1920x600?text=徒步探险',
        image: 'https://via.placeholder.com/400x300?text=徒步探险'
      },
      {
        id: 'beach',
        name: '海岛沙滩',
        shortDescription: '蔚蓝海水，细腻沙滩',
        description: '在河北的黄金海岸线上，感受碧海蓝天的无限魅力。北戴河的细软沙滩，秦皇岛的宁静海湾，让你领略不一样的海滨风光。',
        coverImage: 'https://via.placeholder.com/1920x600?text=海岛沙滩',
        image: 'https://via.placeholder.com/400x300?text=海岛沙滩'
      },
      {
        id: 'food',
        name: '美食之旅',
        shortDescription: '品尝各地美食，舌尖上的旅行',
        description: '探索河北地道美食，从传统小吃到地方特色菜肴，让味蕾享受一场盛宴。品尝正宗的保定驴肉火烧，承德宫廷菜，唐山大麻花等特色美食。',
        coverImage: 'https://via.placeholder.com/1920x600?text=美食之旅',
        image: 'https://via.placeholder.com/400x300?text=美食之旅'
      },
      {
        id: 'photography',
        name: '摄影胜地',
        shortDescription: '捕捉最美瞬间，记录旅途中的感动',
        description: '河北的绝美风光为摄影爱好者提供了无限创作素材。从壮丽的长城到金黄的油菜花田，每一个角落都是摄影的绝佳取景地。',
        coverImage: 'https://via.placeholder.com/1920x600?text=摄影胜地',
        image: 'https://via.placeholder.com/400x300?text=摄影胜地'
      }
    ]);

    // 当前主题
    const currentTheme = computed(() => {
      return themes.value.find(theme => theme.clazzId == themeId.value) || themes.value[0];
    });

    // 相关主题
    const relatedThemes = computed(() => {
      return themes.value.filter(theme => theme.clazzId !=currentTheme.value.clazzId).slice(0, 3);
    });

    // 区域数据
    const regionOptions = [
  {
    value: '石家庄',
    label: '石家庄',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '长安区', label: '长安区' },
          { value: '桥西区', label: '桥西区' },
          { value: '新华区', label: '新华区' },
          { value: '裕华区', label: '裕华区' },
          { value: '井陉矿区', label: '井陉矿区' },
          { value: '藁城区', label: '藁城区' },
          { value: '鹿泉区', label: '鹿泉区' },
          { value: '栾城区', label: '栾城区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '辛集市', label: '辛集市' },
          { value: '晋州市', label: '晋州市' },
          { value: '新乐市', label: '新乐市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '井陉县', label: '井陉县' },
          { value: '正定县', label: '正定县' },
          { value: '行唐县', label: '行唐县' },
          { value: '灵寿县', label: '灵寿县' },
          { value: '高邑县', label: '高邑县' },
          { value: '深泽县', label: '深泽县' },
          { value: '赞皇县', label: '赞皇县' },
          { value: '无极县', label: '无极县' },
          { value: '平山县', label: '平山县' },
          { value: '元氏县', label: '元氏县' },
          { value: '赵县', label: '赵县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '正定古城', label: '正定古城' },
          { value: '西柏坡', label: '西柏坡' },
          { value: '赵州桥', label: '赵州桥' },
          { value: '苍岩山', label: '苍岩山' },
          { value: '嶂石岩', label: '嶂石岩' }
        ]
      }
    ]
  },
  {
    value: '承德',
    label: '承德',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '双桥区', label: '双桥区' },
          { value: '双滦区', label: '双滦区' },
          { value: '鹰手营子矿区', label: '鹰手营子矿区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '平泉市', label: '平泉市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '承德县', label: '承德县' },
          { value: '兴隆县', label: '兴隆县' },
          { value: '滦平县', label: '滦平县' },
          { value: '隆化县', label: '隆化县' },
          { value: '丰宁满族自治县', label: '丰宁满族自治县' },
          { value: '宽城满族自治县', label: '宽城满族自治县' },
          { value: '围场满族蒙古族自治县', label: '围场满族蒙古族自治县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '避暑山庄', label: '避暑山庄' },
          { value: '外八庙', label: '外八庙' },
          { value: '金山岭长城', label: '金山岭长城' },
          { value: '塞罕坝国家森林公园', label: '塞罕坝国家森林公园' },
          { value: '木兰围场', label: '木兰围场' }
        ]
      }
    ]
  },
  {
    value: '秦皇岛',
    label: '秦皇岛',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '海港区', label: '海港区' },
          { value: '北戴河区', label: '北戴河区' },
          { value: '山海关区', label: '山海关区' },
          { value: '抚宁区', label: '抚宁区' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '青龙满族自治县', label: '青龙满族自治县' },
          { value: '昌黎县', label: '昌黎县' },
          { value: '卢龙县', label: '卢龙县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '北戴河海滨', label: '北戴河海滨' },
          { value: '山海关', label: '山海关' },
          { value: '黄金海岸', label: '黄金海岸' },
          { value: '鸽子窝公园', label: '鸽子窝公园' },
          { value: '老龙头', label: '老龙头' },
          { value: '南戴河', label: '南戴河' }
        ]
      }
    ]
  },
  {
    value: '张家口',
    label: '张家口',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '桥东区', label: '桥东区' },
          { value: '桥西区', label: '桥西区' },
          { value: '宣化区', label: '宣化区' },
          { value: '下花园区', label: '下花园区' },
          { value: '万全区', label: '万全区' },
          { value: '崇礼区', label: '崇礼区' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '张北县', label: '张北县' },
          { value: '康保县', label: '康保县' },
          { value: '沽源县', label: '沽源县' },
          { value: '尚义县', label: '尚义县' },
          { value: '蔚县', label: '蔚县' },
          { value: '阳原县', label: '阳原县' },
          { value: '怀安县', label: '怀安县' },
          { value: '怀来县', label: '怀来县' },
          { value: '涿鹿县', label: '涿鹿县' },
          { value: '赤城县', label: '赤城县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '崇礼滑雪场', label: '崇礼滑雪场' },
          { value: '万龙滑雪场', label: '万龙滑雪场' },
          { value: '草原天路', label: '草原天路' },
          { value: '大境门', label: '大境门' },
          { value: '小五台山', label: '小五台山' },
          { value: '暖泉古镇', label: '暖泉古镇' }
        ]
      }
    ]
  },
  {
    value: '唐山',
    label: '唐山',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '路南区', label: '路南区' },
          { value: '路北区', label: '路北区' },
          { value: '古冶区', label: '古冶区' },
          { value: '开平区', label: '开平区' },
          { value: '丰南区', label: '丰南区' },
          { value: '丰润区', label: '丰润区' },
          { value: '曹妃甸区', label: '曹妃甸区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '遵化市', label: '遵化市' },
          { value: '迁安市', label: '迁安市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '滦州市', label: '滦州市' },
          { value: '滦南县', label: '滦南县' },
          { value: '乐亭县', label: '乐亭县' },
          { value: '迁西县', label: '迁西县' },
          { value: '玉田县', label: '玉田县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '清东陵', label: '清东陵' },
          { value: '清西陵', label: '清西陵' },
          { value: '南湖公园', label: '南湖公园' },
          { value: '唐山地震遗址', label: '唐山地震遗址' },
          { value: '月坨岛', label: '月坨岛' }
        ]
      }
    ]
  },
  {
    value: '廊坊',
    label: '廊坊',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '安次区', label: '安次区' },
          { value: '广阳区', label: '广阳区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '霸州市', label: '霸州市' },
          { value: '三河市', label: '三河市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '固安县', label: '固安县' },
          { value: '永清县', label: '永清县' },
          { value: '香河县', label: '香河县' },
          { value: '大城县', label: '大城县' },
          { value: '文安县', label: '文安县' },
          { value: '大厂回族自治县', label: '大厂回族自治县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '天下第一城', label: '天下第一城' },
          { value: '茗汤温泉', label: '茗汤温泉' },
          { value: '自然公园', label: '自然公园' }
        ]
      }
    ]
  },
  {
    value: '保定',
    label: '保定',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '竞秀区', label: '竞秀区' },
          { value: '莲池区', label: '莲池区' },
          { value: '满城区', label: '满城区' },
          { value: '清苑区', label: '清苑区' },
          { value: '徐水区', label: '徐水区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '涿州市', label: '涿州市' },
          { value: '定州市', label: '定州市' },
          { value: '安国市', label: '安国市' },
          { value: '高碑店市', label: '高碑店市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '涞水县', label: '涞水县' },
          { value: '阜平县', label: '阜平县' },
          { value: '定兴县', label: '定兴县' },
          { value: '唐县', label: '唐县' },
          { value: '高阳县', label: '高阳县' },
          { value: '容城县', label: '容城县' },
          { value: '涞源县', label: '涞源县' },
          { value: '望都县', label: '望都县' },
          { value: '易县', label: '易县' },
          { value: '曲阳县', label: '曲阳县' },
          { value: '蠡县', label: '蠡县' },
          { value: '顺平县', label: '顺平县' },
          { value: '博野县', label: '博野县' },
          { value: '雄县', label: '雄县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '白洋淀', label: '白洋淀' },
          { value: '野三坡', label: '野三坡' },
          { value: '狼牙山', label: '狼牙山' },
          { value: '直隶总督署', label: '直隶总督署' },
          { value: '古莲花池', label: '古莲花池' }
        ]
      }
    ]
  },
  {
    value: '沧州',
    label: '沧州',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '新华区', label: '新华区' },
          { value: '运河区', label: '运河区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '泊头市', label: '泊头市' },
          { value: '任丘市', label: '任丘市' },
          { value: '黄骅市', label: '黄骅市' },
          { value: '河间市', label: '河间市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '沧县', label: '沧县' },
          { value: '青县', label: '青县' },
          { value: '东光县', label: '东光县' },
          { value: '海兴县', label: '海兴县' },
          { value: '盐山县', label: '盐山县' },
          { value: '肃宁县', label: '肃宁县' },
          { value: '南皮县', label: '南皮县' },
          { value: '吴桥县', label: '吴桥县' },
          { value: '献县', label: '献县' },
          { value: '孟村回族自治县', label: '孟村回族自治县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '吴桥杂技大世界', label: '吴桥杂技大世界' },
          { value: '沧州铁狮子', label: '沧州铁狮子' },
          { value: '南大港湿地', label: '南大港湿地' },
          { value: '东光铁佛寺', label: '东光铁佛寺' }
        ]
      }
    ]
  },
  {
    value: '衡水',
    label: '衡水',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '桃城区', label: '桃城区' },
          { value: '冀州区', label: '冀州区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '深州市', label: '深州市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '枣强县', label: '枣强县' },
          { value: '武邑县', label: '武邑县' },
          { value: '武强县', label: '武强县' },
          { value: '饶阳县', label: '饶阳县' },
          { value: '安平县', label: '安平县' },
          { value: '故城县', label: '故城县' },
          { value: '景县', label: '景县' },
          { value: '阜城县', label: '阜城县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '衡水湖', label: '衡水湖' },
          { value: '武强年画博物馆', label: '武强年画博物馆' },
          { value: '景州塔', label: '景州塔' }
        ]
      }
    ]
  },
  {
    value: '邢台',
    label: '邢台',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '襄都区', label: '襄都区' },
          { value: '信都区', label: '信都区' },
          { value: '任泽区', label: '任泽区' },
          { value: '南和区', label: '南和区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '南宫市', label: '南宫市' },
          { value: '沙河市', label: '沙河市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '临城县', label: '临城县' },
          { value: '内丘县', label: '内丘县' },
          { value: '柏乡县', label: '柏乡县' },
          { value: '隆尧县', label: '隆尧县' },
          { value: '宁晋县', label: '宁晋县' },
          { value: '巨鹿县', label: '巨鹿县' },
          { value: '新河县', label: '新河县' },
          { value: '广宗县', label: '广宗县' },
          { value: '平乡县', label: '平乡县' },
          { value: '威县', label: '威县' },
          { value: '清河县', label: '清河县' },
          { value: '临西县', label: '临西县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '崆山白云洞', label: '崆山白云洞' },
          { value: '邢台大峡谷', label: '邢台大峡谷' },
          { value: '天河山', label: '天河山' },
          { value: '前南峪', label: '前南峪' },
          { value: '开元寺', label: '开元寺' }
        ]
      }
    ]
  },
  {
    value: '邯郸',
    label: '邯郸',
    children: [
      {
        value: '市区',
        label: '市区',
        children: [
          { value: '邯山区', label: '邯山区' },
          { value: '丛台区', label: '丛台区' },
          { value: '复兴区', label: '复兴区' },
          { value: '峰峰矿区', label: '峰峰矿区' },
          { value: '肥乡区', label: '肥乡区' },
          { value: '永年区', label: '永年区' },
          { value: '临漳区', label: '临漳区' }
        ]
      },
      {
        value: '县级市',
        label: '县级市',
        children: [
          { value: '武安市', label: '武安市' }
        ]
      },
      {
        value: '县',
        label: '县',
        children: [
          { value: '临漳县', label: '临漳县' },
          { value: '成安县', label: '成安县' },
          { value: '大名县', label: '大名县' },
          { value: '涉县', label: '涉县' },
          { value: '磁县', label: '磁县' },
          { value: '邱县', label: '邱县' },
          { value: '鸡泽县', label: '鸡泽县' },
          { value: '广平县', label: '广平县' },
          { value: '馆陶县', label: '馆陶县' },
          { value: '魏县', label: '魏县' },
          { value: '曲周县', label: '曲周县' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '娲皇宫', label: '娲皇宫' },
          { value: '广府古城', label: '广府古城' },
          { value: '响堂山石窟', label: '响堂山石窟' },
          { value: '129师司令部旧址', label: '129师司令部旧址' },
          { value: '赵苑公园', label: '赵苑公园' },
          { value: '铜雀台遗址', label: '铜雀台遗址' }
        ]
      }
    ]
  },
  // 河北省直管县级市单独列出
  {
    value: '定州',
    label: '定州',
    children: [
      {
        value: '行政区划',
        label: '行政区划',
        children: [
          { value: '南城区', label: '南城区' },
          { value: '北城区', label: '北城区' },
          { value: '西城区', label: '西城区' },
          { value: '长安路街道', label: '长安路街道' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '定州开元寺塔', label: '定州开元寺塔' },
          { value: '定州贡院', label: '定州贡院' },
          { value: '定州文庙', label: '定州文庙' }
        ]
      }
    ]
  },
  {
    value: '辛集',
    label: '辛集',
    children: [
      {
        value: '行政区划',
        label: '行政区划',
        children: [
          { value: '辛集镇', label: '辛集镇' },
          { value: '旧城镇', label: '旧城镇' },
          { value: '张古庄镇', label: '张古庄镇' },
          { value: '位伯镇', label: '位伯镇' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '辛集国际皮革城', label: '辛集国际皮革城' },
          { value: '清利寺', label: '清利寺' }
        ]
      }
    ]
  },
  // 雄安新区单独列出
  {
    value: '雄安新区',
    label: '雄安新区',
    children: [
      {
        value: '行政区划',
        label: '行政区划',
        children: [
          { value: '容城县', label: '容城县' },
          { value: '安新县', label: '安新县' },
          { value: '雄县', label: '雄县' }
        ]
      },
      {
        value: '核心区域',
        label: '核心区域',
        children: [
          { value: '启动区', label: '启动区' },
          { value: '起步区', label: '起步区' }
        ]
      },
      {
        value: '名胜景区',
        label: '名胜景区',
        children: [
          { value: '白洋淀', label: '白洋淀' },
          { value: '雄安郊野公园', label: '雄安郊野公园' },
          { value: '悦容公园', label: '悦容公园' }
        ]
      }
    ]
  }
];
        
    // 模拟地点数据
    const places = ref([]);
    const spots = ref([]);
    const cities = ref([]);

    // 按类别过滤地点
const getFilteredPlacesByCategory = (category) => {
  if (category === '城市') {
    places.value = cities.value;
  } else {
    places.value = spots.value;
  }
};


    // 过滤后的地点
    const filteredPlaces = computed(() => {
      let result = places.value;
      // 应用筛选条件
      if (filters.category === '景点') {
        result =spots.value ;
      }else{
        result =cities.value ;
      }
      if (filters.region !== '全部') {
        result = result.filter(place =>
            { if (filters.category === '景点') {
              return  place.city.cityName==filters.region 
      }else{
        return place.cityName==filters.region
      }
             
            }
        );
      }

      if (filters.season !== '全部') {
        result = result.filter(place =>
      {   if (filters.category === '景点') {
              return place.seasons.最佳季节.includes(filters.season)|| place.seasons.最佳季节=="四季皆宜"
      }else{
        return 1;
      }
      }
        );
      }

     

      // 应用排序
      switch (currentSort.value) {
        case 'popularity':
          result = [...result].sort((a, b) => b.hotness - a.hotness);
          break;
        case 'rating':
        if (filters.category === '景点') {
          result = [...result].sort((a, b) => b.score - a.score);
      }else{
        result = [...result].sort((a, b) => b.likes - a.likes);
      }
          break;
        
      }

      // 计算总数并返回当前页的数据
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      totalPlaces.value = result.length;
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return result.slice(start, end);
    });



    // 应用筛选条件
    const applyFilters = () => {
      currentPage.value = 1;
      // filteredPlaces计算属性会自动更新
    };

    // 处理热门地区选择
    const handleHotRegionChange = (value) => {
      regionCascaderValue.value = [];
      filters.region = value;
      applyFilters();
    };

    // 处理级联选择器选择
    const handleCascaderChange = (value) => {
      if (!value || value.length === 0) {
        return;
      }

      filters.region = value[value.length - 1];
      applyFilters();
    };

    // 处理排序
    const handleSort = (command) => {
      currentSort.value = command;
      // filteredPlaces计算属性会自动更新
    };

    // 处理页码变化
    const handlePageChange = (page) => {
      currentPage.value = page;
      // filteredPlaces计算属性会自动更新
      window.scrollTo({
        top: document.querySelector('.theme-content').offsetTop - 20,
        behavior: 'smooth'
      });
    };

    // 查看景点详情（新增的专门用于景点的路由）
    const viewSceneryDetail = (id) => {
      ElMessage.success(`查看景点详情，ID: ${id}`);
      // 使用景点专用路由
      router.push(`/spotsIntro?id=${id}`);
    };

    // 查看城市详情（新增的专门用于城市的路由）
    const viewCityDetail = (id) => {
      ElMessage.success(`查看城市详情，ID: ${id}`);
      // 使用城市专用路由
      router.push(`/city/${id}`);
    };

    // 切换主题
    const switchTheme = (themeId) => {
      ElMessage.success(`切换主题成功`);
      // 跳转到指定主题的页面
      router.push({
    path: '/themePage',
    query: { id: themeId }
  });
    };
    // XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 新增函数begin
    const updateTheme = async () => {
  const res = await getSpotClass();  // 等待接口返回数据
  themes.value = res.data;

  const currentTheme = themes.value.find(theme => theme.clazzId == themeId.value);

  if (currentTheme) {
    spots.value = currentTheme.spots || [];
    places.value = [...spots.value]; // 确保 places 是新对象，从而触发视图更新
    console.log(`output->places.value`,places.value)
  } else {
    spots.value = [];
  }
};
const updateThemeCity = async () => {
  const res = await findThemeCity(themeId.value);  // 等待接口返回数据
  cities.value = res.data;
};

    onMounted(async () => {
  loading.value = true;
  await updateThemeCity();
  await updateTheme(); // 等待 updateTheme 异步处理完

  loading.value = false;

});

    return {
      activeComponent,
      currentTheme,
      relatedThemes,
      loading,
      filters,
      currentPage,
      pageSize,
      totalPlaces,
      sortOptions,
      currentSort,
      regionOptions,
      cascaderProps,
      regionCascaderValue,
      filteredPlaces,
      getFilteredPlacesByCategory,
      handleHotRegionChange,
      handleCascaderChange,
      applyFilters,
      handleSort,
      handlePageChange,
      viewSceneryDetail,
      viewCityDetail,
      switchTheme,
      updateTheme,
      updateThemeCity
    };
  }
};
</script>